<template>
	<view>
		<graceTouch @thStart="thStart" @thMove="thMove" @thEnd="thEnd" @tapme="tapin">
			<view style="height: auto;" :style="{
					marginLeft:(moveIndex != index ? 0 : (x * -1) )+ 'px', width:width+'rpx'
				}">
				<slot></slot>
			</view>
		</graceTouch>
	</view>
</template>
<script>
	import graceTouch from "./graceTouch.vue";
	export default {
		props:{
			width:{type:Number, default:750},
			label:{type:Object, default:null},
			index:{type:Number, required: true, default:-1},
			moveIndex:{type:Number, required: true, default:-2},
		},
		data() {
			return {
				msgsIn: [],
				damping: 0.29,
				x: 0,
				oX: 0,
				scY: true,
				arrvie:200
			}
		},
		methods: {
			thStart: function(e, index) {
				this.$emit('itemTap',this.index);
				this.oX = this.x;
				this.x = 0;
				this.damping = 0.1;
			},
			thMove: function(e, index) {
				//console.log("thMove")
				var x = Math.abs(e[0][0]);
				var y = Math.abs(e[0][1]);
				if (y > x) {
					this.scY = true;
					//this.moveIndex = -1;
					return;
				}
				this.scY = false;
				this.x -= e[0][0] * this.damping;
				if (this.x > this.btnWidth) {
					this.x = this.btnWidth;
				}
				if (this.x < 0) {
					this.x = 0;
				}
				this.damping *= 1.02;
				if (this.x >= this.arrvie) {
					this.x = this.arrvie
					this.$emit('arrive',this.index);
				}
			},
			thEnd: function(e, index) {
				if (this.x < this.arrvie) {
					this.x = 0
				}
/* 				console.log("thEnd")
				if (this.btnWidth >= 30) {
					console.log(this.btnWidth)
					this.x = 30;
				} else {
					console.log(this.btnWidth)
					this.x = this.btnWidth;
					
				}
				this.scY = true; */
			}
		},
		components: {
			graceTouch
		}
	}
</script>
<style scoped>
</style>